<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程-搜索-121邹圣洁</title>
    <link rel="stylesheet" href="download/font_ewrrrydj26/iconfont.css">
    <style>
        body,ul,p{
            margin: 0;
            padding: 0;
        }
        #head{
            width: 100%;
        }
        #head ul{
            width: 98%;
            margin-left: 1%;
            margin-top: 10px;
            display: flex;
            list-style-type: none;
        }
        #head ul li:nth-child(2){
            width: 90%;
        }
        #head ul li:nth-child(1),#head ul li:nth-child(3){
            width: 6%;
            height: 40px;
            line-height: 40px;
        }
        #head ul li:nth-child(1){
            width: 4%;
        }
        #head ul li a{
            text-decoration: none;
            margin-left: 10%;
        }
        .icon-fanhui{
            font-size: 25px;
            color: rgb(94, 94, 94);
        }
        #head ul li .ss{
            width: 99%;
            height: 40px;
            border-radius: 50px;
            border: 2px solid #0086f7;
            display: flex;
        }
        #head ul li .ss #search{
            border: none;
            margin-left: 20px;
            flex-grow: 10;
            font-size: 16px;
        }
        #head ul li .ss .icon-ditu{
            margin-right: 20px;
            font-size: 30px;
            color: #676767;
            margin-top: 5px;
        }
        #head #sub{
            font-size: 16px;
            border: none;
            width: 65px;
            margin-right: 60px;
            border-radius: 32px;
            height: 38px;
            background: linear-gradient(to right,#0387f3,#3bbcff);
            color: #fff;
            margin-top: 1px;
            margin-right: 1px;
            font-family: "黑体";
        }
        .ls{
            width: 100%;
            margin-top: 20px;
        }
        .ls ul:nth-child(1){
            width: 98%;
            display: flex;
            margin: 0 auto;
            list-style-type: none;
        }
        .ls ul:nth-child(1) li{
            width: 5%;
        }
        .ls ul:nth-child(1) li:nth-child(1){
            flex-grow: 20;
        }
        .ls .title{
            font-size: 18px;
        }
        .ls ul:nth-child(1) li .icon-shanchu{
            font-size: 22px;
            color: #808080;
            margin-left: 10%;
        }
        .ls .n{
            width: 96%;
            margin-left: 2%;
            margin-top: 15px;
        }
        .ls .n .an{
            border: none;
            background-color: rgb(215, 215, 215);
            padding: 10px;
            border-radius: 18px;
            color: #000000;
            margin-left: 10px;
            margin-top: 10px;
        }
        .ls .rm{
            font-size: 18px;
            margin-left: 20px;
            margin-top: 20px;
        }

        .x{
            width: 100%;
            margin-top: 40px;
            display: flex;
            flex-wrap: wrap;
        }
        .x .bt{
            width: 340px;
            display: flex;
            height: 60px;
            background: linear-gradient(to right,#cb8450,#deaa70);
            margin-left: 20px;
            border-radius: 10px 10px 0 0;
        }
        .x .bt li{
            display: flex;
            width: 160px;
            height: 60px;
            line-height: 60px;
            margin-left: 10px;
        }
        .x .bt .icon-w_re{
            font-size: 20px;
            color: #fff;
        }
        .x .bt li:nth-child(1) p{
            font-size: 18px;
            color: #fff;
        }
        .x .bt li:nth-child(2) img{
            width: 65px;
            height: 30px;
            margin-top: 15px;
        }
        .x .bt li:nth-child(2) p{
            font-size: 14px;
            color: #fff;
        }
        .x .bt li:nth-child(2) .icon-guanbi{
            color: #fff;
            font-size: 15px;
            margin-left: 5px;
        }
        .x .tw{
            width: 338px;
            border-left: 1px solid rgb(198, 198, 198);
            border-right: 1px solid rgb(198, 198, 198);
            border-bottom: 1px solid rgb(198, 198, 198);
            margin-left: 20px;
            box-shadow: 3px 3px 3px #cacaca;
            border-radius: 0 0 10px 10px;
            margin-bottom: 20px;
        }
        .x .tw li{
            display: flex;
            width: 320px;
            margin-left: 10px;
            padding-top: 10px;
            position: relative;
        }
        .x .tw li .img1{
            width: 60px;
            height: 60px;
        }
        .x .tw li .img2{
            width: 55px;
            height: 22px;
            position: absolute;
            top: 30px;
            right: 0;
        }
        .x .tw li .hei{
            font-size: 14px;
            margin-top: 10px;
        }
        .x .tw li .huang{
            font-size: 12px;
            margin-top: 10px;
            color: #d68d5a;
        }
        .x .tw li:nth-child(5){
            padding-bottom: 15px;
        }
        .x .tw .te{
            border-top: 1px solid rgb(198, 198, 198);
        }
        .x .tw .te .bd{
            font-size: 14px;
            color: #d68d5a;
            margin-bottom: 10px;
            margin-left: 110px;
        }
    </style>
</head>
<body>
    <header id="head">
        <ul>
            <li><a href="index.html"><span class="iconfont icon-fanhui"></span></a></li>
            <li>
                <div class="ss">
                    <input type="text" name="search" id="search" required placeholder="新5008品味家庭日">
                    <span class="iconfont icon-ditu"></span>
                </div>
            </li>
            <li><input type="submit" value="搜索" id="sub"></li>
        </ul>
    </header>
    <div class="ls">
        <ul>
            <li><p class="title">历史搜索</p></li>
            <li><span class="iconfont icon-shanchu"></span></li>
        </ul>
        <ul class="n">
            <input type="submit" value=" 火车票 " class="an">
            <input type="submit" value=" 沈阳到杭州的飞机票 " class="an">
            <input type="submit" value=" 机票 " class="an">
            <input type="submit" value=" 大连 " class="an">
            <input type="submit" value=" 汽车票 " class="an">
            <input type="submit" value=" 行李寄存-同城 " class="an">
        </ul>
        <p class="rm">热门推荐</p>
        <ul class="n">
            <input type="submit" value=" 酒店 " class="an">
            <input type="submit" value=" 沈阳到杭州的飞机票 " class="an">
            <input type="submit" value=" 澳大利亚星球号 " class="an">
            <input type="submit" value=" 七天优品酒店（大连机… " class="an">
            <input type="submit" value=" 汽车票 " class="an">
            <input type="submit" value=" 特价专区 " class="an">
            <input type="submit" value=" 大连的酒店 " class="an">
        </ul>
    </div>
    <div class="x">
        <ul>
            <ul class="bt">
                <li>
                    <span class="iconfont icon-w_re"></span>
                    <p>周边热搜榜</p>
                </li>
                <li>
                    <p>7w人看过</p>
                    <img src="img/san.png">
                    <span class="iconfont icon-guanbi"></span>
                </li>
            </ul>
            <ul class="tw">
                <li>
                    <img src="img/ul1tx-1.png" class="img1">
                    <div class="hx">
                        <p class="hei">1 刘公岛</p>
                        <p class="huang">“甲午海战纪念地”</p>
                    </div>
                    <img src="img/ul1rd-1.png" class="img2">
                </li>
                <li>
                    <img src="img/ul1tx-2.png" class="img1">
                    <div class="hx">
                        <p class="hei">2 阿那亚</p>
                        <p class="huang">“文艺风格十足”</p>
                    </div>
                    <img src="img/ul1rd-2.png" class="img2">
                </li>
                <li>
                    <img src="img/ul1tx-3.png" class="img1">
                    <div class="hx">
                        <p class="hei">3 蓬莱阁</p>
                        <p class="huang">“八仙过海传说诞生地”</p>
                    </div>
                    <img src="img/ul1rd-3.png" class="img2">
                </li>
                <li>
                    <img src="img/ul1tx-4.png" class="img1">
                    <div class="hx">
                        <p class="hei">4 文城城堡</p>
                        <p class="huang">“《西虹市首富》拍摄地”</p>
                    </div>
                    <img src="img/ul1rd-4.png" class="img2">
                </li>
                <li>
                    <img src="img/ul1tx-5.png" class="img1">
                    <div class="hx">
                        <p class="hei">5 大连铭湖</p>
                        <p class="huang">“体验高标准旅游雪场”</p>
                    </div>
                    <img src="img/ul1rd-5.png" class="img2">
                </li>
                <li class="te"><p class="bd">查看完整榜单</p></li>
            </ul>
        </ul>
        <ul>
            <ul class="bt">
                <li>
                    <span class="iconfont icon-w_re"></span>
                    <p>全网景点飙升榜</p>
                </li>
                <li>
                    <p>8w人看过</p>
                    <img src="img/san.png">
                    <span class="iconfont icon-guanbi"></span>
                </li>
            </ul>
            <ul class="tw">
                <li>
                    <img src="img/ul2tx-1.png" class="img1">
                    <div class="hx">
                        <p class="hei">1 漫花庄园</p>
                        <p class="huang">“踏青赏花网红打卡地”</p>
                    </div>
                    <img src="img/ul2rd-1.png" class="img2">
                </li>
                <li>
                    <img src="img/ul2tx-2.png" class="img1">
                    <div class="hx">
                        <p class="hei">2 鼋头渚</p>
                        <p class="huang">“太湖风光精华所在”</p>
                    </div>
                    <img src="img/ul2rd-2.png" class="img2">
                </li>
                <li>
                    <img src="img/ul2tx-3.png" class="img1">
                    <div class="hx">
                        <p class="hei">3 平坝农场樱花园</p>
                        <p class="huang">“自驾赏50余万株樱花”</p>
                    </div>
                    <img src="img/ul2rd-3.png" class="img2">
                </li>
                <li>
                    <img src="img/ul2tx-4.png" class="img1">
                    <div class="hx">
                        <p class="hei">4 牛首山文化旅游区</p>
                        <p class="huang">“朝拜礼佛的千年道场”</p>
                    </div>
                    <img src="img/ul2rd-4.png" class="img2">
                </li>
                <li>
                    <img src="img/ul2tx-5.png" class="img1">
                    <div class="hx">
                        <p class="hei">5 望仙谷</p>
                        <p class="huang">“《西虹市首富》拍摄地”</p>
                    </div>
                    <img src="img/ul2rd-5.png" class="img2">
                </li>
                <li class="te"><p class="bd">查看完整榜单</p></li>
            </ul>
        </ul>
        <ul>
            <ul class="bt">
                <li>
                    <span class="iconfont icon-w_re"></span>
                    <p>大连酒店飙升榜</p>
                </li>
                <li>
                    <p>6w人看过</p>
                    <img src="img/san.png">
                    <span class="iconfont icon-guanbi"></span>
                </li>
            </ul>
            <ul class="tw">
                <li>
                    <img src="img/ul3tx-1.png" class="img1">
                    <div class="hx">
                        <p class="hei">1 七天优品酒店</p>
                        <p class="huang">“经济型”</p>
                    </div>
                    <img src="img/ul3rd-1.png" class="img2">
                </li>
                <li>
                    <img src="img/ul3tx-2.png" class="img1">
                    <div class="hx">
                        <p class="hei">2 大连东泉温泉假日酒店</p>
                        <p class="huang">“豪华型”</p>
                    </div>
                    <img src="img/ul3rd-2.png" class="img2">
                </li>
                <li>
                    <img src="img/ul3tx-3.png" class="img1">
                    <div class="hx">
                        <p class="hei">3 大连铭湖国际温泉</p>
                        <p class="huang">“舒适型”</p>
                    </div>
                    <img src="img/ul3rd-3.png" class="img2">
                </li>
                <li>
                    <img src="img/ul3tx-4.png" class="img1">
                    <div class="hx">
                        <p class="hei">4 大连一方城堡豪华</p>
                        <p class="huang">“豪华型”</p>
                    </div>
                    <img src="img/ul3rd-4.png" class="img2">
                </li>
                <li>
                    <img src="img/ul3tx-5.png" class="img1">
                    <div class="hx">
                        <p class="hei">5 大连汤景泽日式温泉</p>
                        <p class="huang">“高档型”</p>
                    </div>
                    <img src="img/ul3rd-5.png" class="img2">
                </li>
                <li class="te"><p class="bd">查看完整榜单</p></li>
            </ul>
        </ul>
        <ul>
            <ul class="bt">
                <li>
                    <span class="iconfont icon-w_re"></span>
                    <p>大连酒店飙升榜</p>
                </li>
                <li>
                    <p>6w人看过</p>
                    <img src="img/san.png">
                    <span class="iconfont icon-guanbi"></span>
                </li>
            </ul>
            <ul class="tw">
                <li>
                    <img src="img/ul3tx-1.png" class="img1">
                    <div class="hx">
                        <p class="hei">1 七天优品酒店</p>
                        <p class="huang">“经济型”</p>
                    </div>
                    <img src="img/ul3rd-1.png" class="img2">
                </li>
                <li>
                    <img src="img/ul3tx-2.png" class="img1">
                    <div class="hx">
                        <p class="hei">2 大连东泉温泉假日酒店</p>
                        <p class="huang">“豪华型”</p>
                    </div>
                    <img src="img/ul3rd-2.png" class="img2">
                </li>
                <li>
                    <img src="img/ul3tx-3.png" class="img1">
                    <div class="hx">
                        <p class="hei">3 大连铭湖国际温泉</p>
                        <p class="huang">“舒适型”</p>
                    </div>
                    <img src="img/ul3rd-3.png" class="img2">
                </li>
                <li>
                    <img src="img/ul3tx-4.png" class="img1">
                    <div class="hx">
                        <p class="hei">4 大连一方城堡豪华</p>
                        <p class="huang">“豪华型”</p>
                    </div>
                    <img src="img/ul3rd-4.png" class="img2">
                </li>
                <li>
                    <img src="img/ul3tx-5.png" class="img1">
                    <div class="hx">
                        <p class="hei">5 大连汤景泽日式温泉</p>
                        <p class="huang">“高档型”</p>
                    </div>
                    <img src="img/ul3rd-5.png" class="img2">
                </li>
                <li class="te"><p class="bd">查看完整榜单</p></li>
            </ul>
        </ul>
    </div>
</body>
</html>